<template>
<div class="cross-validation">
    <div class="cross-validation-header">
        <span class="header-span"><i class="iconfont icon-baogao"></i>{{this.modelDetail.summary.evaSummary.reportName || ''}}</span>
        <span class="header-span"><i class="iconfont icon-report-experiment"></i>{{expname || ''}}</span>
        <span class="header-span"><i class="iconfont icon-chuangjianren"></i>{{userInfo?userInfo.username:''}}</span>
        <!-- <span class="header-span"><i class="iconfont icon-shijian1"></i>{{userInfo?userInfo.lastLoginTime:''}}</span> -->
        <!-- <span class="header-span-special"><i class="iconfont icon-baogaojiedu"></i>报告解读</span> -->
    </div>
    <span class="header-span">{{this.modelDetail.summary.evaSummary.header.crossValidateName}}</span>
    <span class="header-span">{{this.modelDetail.summary.evaSummary.header.folderNum}}</span>
    <span class="header-span">总样本数：{{this.modelDetail.summary.evaSummary.header.totalSamples}}</span>
    <el-table :data="tableData.rows">
        <el-table-column show-overflow-tooltip prop="折数" label="折数">
            <template slot="header">
                <el-tooltip effect="dark" content="折数" placement="top">
                    <span>折数</span>
                </el-tooltip>
            </template>
            <template slot-scope="scope">
                <span class="important-sign" v-if="scope.row['折数']==='平均值'||scope.row['折数']==='标准差'">*</span>
                {{scope.row['折数']}}
                <el-tooltip
                    effect="dark"
                    :content="scope.row['折数']==='平均值'?'评估指标的平均值，衡量模型表现的标准。':'模型每次输出结果与输出期望之间的误差，反应模型的稳定性，预测的波动情况。'"
                    :placement="scope.row['折数']==='平均值'?'top':'bottom'">
                    <i v-if="scope.row['折数']==='平均值'||scope.row['折数']==='标准差'" class="el-icon-question"></i>
                </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column v-for="(item, i) in tableData.columns" :key="i" show-overflow-tooltip :prop="item" :label="item">
            <template slot="header">
                <el-tooltip effect="dark" :content="item" placement="top">
                    <span>{{item}}</span>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>
</div>
</template>

<script>
import {
    mapGetters
} from 'vuex'
export default {
    name: 'CrossValidation',
    computed: {
        ...mapGetters({
            modelDetail: 'common/getModelDetail'
        })
    },
    data () {
        return {
            expname: localStorage.getItem('experimentName'),
            userInfo: JSON.parse(localStorage.getItem('USER')) || '',
            tableData: {
                rows: [],
                columns: []
            }
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {
            this.tableData = {
                rows: this.modelDetail.summary.evaSummary.chart.rows,
                columns: this.modelDetail.summary.evaSummary.chart.columns
            }
            // 删除第一列 需要做特殊处理
            this.tableData.columns.shift()
        }
    }
}
</script>

<style lang="less">
.cross-validation {
    .cross-validation-header {
        margin-bottom: 21px;
        padding: 10px 0;
        border-bottom: 1px solid #BBBBBB;
        position: relative;
    }
    .header-span {
        i {
            margin-right: 7px;
        }
        & + .header-span {
            margin-left: 24px;
        }
    }
    .header-span-special {
        position: absolute;
        right: 0;
        bottom: 1px;
        color: #1F8ADB;
        font-size: 12px;
        i {
            margin-right: 2px;
        }
    }
    .el-table {
        margin-top: 10px;
        .has-gutter {
            th {
                background-color: rgba(83, 127, 159, 0.13);
            }
        }
        .el-table__body {
            margin-bottom: 50px;
        }
    }
}
</style>
